<template>
  <div :class="['chat',charList.isUser?'user':'service']">
    <p class="name">{{!charList.isUser?'专属客服':userInfo.username?userInfo.username:'我'}}</p>
    <div class="message">
      <img src="@/assets/szx.jpg" alt="" v-show="!charList.isUser">
      <img
        :src="userInfo.avatar?userInfo.avatar:'http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png'"
        alt v-show="charList.isUser"
      />
      <p class="chat-box">
        <span></span>
        {{charList.content}}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    charList: {
      type: Object,
      default: {}
    },
    userInfo: {
      type: Object,
      default: {}
    }
  }
}

</script>

<style scoped lang="less">
p {
  margin: 0;
}
  .chat.service {
      align-self: flex-start;
      .name {
        padding-left: 50px;
      }
      .chat-box {
        margin-left: 10px;
        span {
          border-right-color: #f3f3f3 !important;
          left: -14px;
        }
      }
    }
    .chat.user {
      align-self: flex-end;
      .message {
        flex-direction: row-reverse;
      }
      .name {
        text-align: right;
        padding-right: 50px;
      }
      .chat-box {
        margin-right: 10px;
        span {
          border-left-color: #f3f3f3 !important;
          right: -14px;
        }
      }
    }
    .chat {
      margin-bottom: 20px;
      .name {
        color: #999;
        line-height: 2.66666em;
      }
      .message {
        display: flex;
        img {
          width: 40px;
          height: 40px;
          border-radius: 5px;
        }
        .chat-box {
          font-size: 14px;
          line-height: 1.66666em;
          max-width: 60%;
          position: relative;
          padding: 10px 15px;
          background: #f3f3f3;
          border-radius: 5px;
          span {
            position: absolute;
            width: 0;
            height: 0;
            border: 7px solid transparent;
            top: 7px;
          }
        }
      }
    }

</style>